<template>
  <div class="top-bar">
    <div class="title">
      <h3>{{ this.$store.state.user.title || 'Linux 监控告警平台'}}</h3>
    </div>
    <el-dropdown @command="handleCommand">
      <span class="footer">
        {{ $store.state.user.name || '未登录' }}
        {{ $store.state.user.isAdmin ? ' 【管理员】' : ''}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu v-if="$store.state.user.name" slot="dropdown">
        <el-dropdown-item command="password">修改密码</el-dropdown-item>
        <!--<el-dropdown-item command="info">个人信息</el-dropdown-item>-->
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dialog width="500px" title="修改密码" :modal="false" :visible.sync="dialogVisible">
      <el-form ref="record" size="medium" :model="record" :rules="$rules.user">
        <el-form-item prop="password" label="当前密码">
          <el-input v-model="record.password" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="newPassword" label="新密码">
          <el-input v-model="record.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item prop="confirmNewPassword" label="确认密码">
          <el-input v-model="record.confirmNewPassword" type="password"></el-input>
        </el-form-item>
      </el-form>

      <div class="oper-area">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
        <el-button type="success" @click="handlePassword">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
  import { SHA256 } from 'crypto-js'
  import { mapActions } from 'vuex'

  export default {
    name: 'top-bar',
    data() {
      return {
        dialogVisible: false,
        record: {},
      }
    },
    methods: {
      ...mapActions(['LOGIN']),
      handlePassword(submit = true) {
        if (submit) {
          this.$refs.record.validate((valid) => {
            if (!valid) {
              return
            }
            if (this.record.newPassword !== this.record.confirmNewPassword) {
              return this.$message.error('前后密码不一致')
            }
            const record = { ...this.record }
            record.password = SHA256(record.password).toString()
            record.newPassword = SHA256(record.newPassword).toString()
            delete record.confirmNewPassword
            this.$httpPut(`/register/${this.$store.state.user._id}/password`, record).then(() => {
              this.$message.success('修改成功')
              this.dialogVisible = false
            }).catch(this.$message.error)
          })
        } else {
          this.dialogVisible = true
        }
      },
      handleCommand(command) {
        switch (command) {
          case 'password':
            this.handlePassword(false)
            break
          case 'info':
            break
          case 'logout':
            this.$confirm('退出登录？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              this.LOGIN({ logout: true })
              this.$router.push('/login')
              this.$message.success('已退出登录')
            }).catch(() => {})
            break
          default:
            console.log('default')
            break
        }
      },
    },
    created() {
    },
  }
</script>


<style lang="scss">
  .top-bar {
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
    height: 60px;
    background-color: #fff;
    color: #409EFF;
    .footer, .el-icon-arrow-down {
      cursor: pointer;
      color: #409EFF;
    }
  }
</style>
